import React, { useEffect } from "react"
import { Modal, Form, Input, Select } from "antd"

function TestModal({ modalProps, formData, confirm }) {
  const [form] = Form.useForm()
  let status = [
    {
      label: "生效中",
      value: 10
    },
    {
      label: "已关闭",
      value: 20
    }
  ]
  // 当modal框关闭状态重置form表单
  useEffect(() => {
    if (!modalProps.open && form) {
      form.resetFields()
    }
  }, [modalProps.open])

  // 设置表单的初始值，只有在formData存在时才设置initialValues
  useEffect(() => {
    if (Object.keys(formData).length) {
      form.setFieldsValue(formData)
    }
  }, [formData])
  // 点击确定按钮校验表单规则 失败抛出异常 反之values 传递给父组件
  const onOk = () => {
    form.validateFields().then((values) => {
      confirm && confirm(values)
    })
  }
  return (
    <Modal {...modalProps} forceRender onOk={onOk}>
      <Form labelCol={{ span: 6 }} form={form} initialValues={formData}>
        <Form.Item
          name="orderNo"
          label="订单标号"
          rules={[
            {
              required: true,
              message: "请输入订单号"
            }
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="odOrderStatus" label="订单状态">
          <Select options={status} placeholder="请选择" />
        </Form.Item>
        <Form.Item name="studentName" label="学员">
          <Input placeholder="请输入" />
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default TestModal
